<template>
    <div class="view">
        <android-nav-bar title="我的收益" v-on:back="back">
            <span slot="right" class="iconfont icon-share rt" @click="share">分享</span>
        </android-nav-bar>
        <div class="income-box">
            <div class="money-score">
                <div class="title"><span class="iconfont icon-xianjin1">&nbsp;</span>现金积分：</div>
                <div class="amount">￥{{user.money}}</div>
                <div class="bill" @click="toPage('mineMoneyBill')"><span class="iconfont icon-mingxi">&nbsp;</span>查看明细</div>
                <div class="withdrawal" @click="toPage('mineMoneyWithdrawal')"><span class="iconfont icon-tixian2">&nbsp;</span>提现</div>
                <div class="recharge" @click="toPage('mineMoneyRecharge')"><span class="iconfont icon-chongzhi">&nbsp;</span>充值</div>
            </div>
            <div class="shopping-score money-score">
                <div class="title"><span class="iconfont icon-gouwu"></span>购物积分：</div>
                <div class="amount">￥{{user.payPoints}}</div>
                <div class="bill" @click="toPage('mineShoppingBill')"><span class="iconfont icon-mingxi">&nbsp;</span>查看明细</div>
            </div>
        </div>

    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {shareControllerToggle, updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineIncome extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private mounted(): void {
            this.onShareMessage = {
                title: `我的资产：余额～${this.user.money}，积分～${this.user.payPoints}`,
                desc: `推荐好友加入心相依，你也能赚钱！！`,
                thumb: this.user.avatar.filePath,
                link: `${this.webPath}#/loginRegister?shareCode=${this.user.code}`
            };
        }

        private share(): void {
            shareControllerToggle(this.onShareMessage);
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden;

        .income-box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);
            color #fff;

            &::before
                display table;
                content '';

            .money-score
                height 140px;
                border-radius 10px;
                margin 10px;
                background-color $theme-common-color;
                position relative;

                .title
                    height 45px;
                    line-height 45px;
                    font-size 18px;
                    padding 0 20px;

                    .icon-xianjin1, .icon-gouwu
                        font-size 24px;

                    .icon-gouwu
                        display inline-block;
                        width 34px;

                .amount
                    position absolute;
                    top 50%;
                    left 50%;
                    transform translate(-50%, -50%);
                    font-size 28px;
                    font-weight 600;
                    text-align center;

                .bill
                    position absolute;
                    left 20px;
                    bottom 20px;
                    font-size 18px;

                    .iconfont
                        font-size 20px;

                .withdrawal
                    position absolute;
                    right 20px;
                    bottom 20px;
                    font-size 18px;

                    .iconfont
                        font-size 22px;

                .recharge
                    position absolute;
                    right 20px;
                    top 20px;
                    font-size 18px;

                    .iconfont
                        font-size 22px;


</style>
